<template>
     <div class="login-box">
        <div class="content" >
            <div class="title">用户注册</div>
            <div class="ipt-box">
                <input type="text" v-model="form.id"  placeholder="输入账号">
            </div>
            <div class="ipt-box">
                <input type="text" v-model="form.name"  placeholder="输入名称">
            </div>
            <div class="ipt-box">
                <input type="text" v-model="form.phone"  placeholder="输入手机号">
            </div>
            <div class="ipt-box">
                <input type="password" v-model="form.password"  placeholder="输入用户密码">
            </div>
            <div class="ipt-box">
                <button @click="registerEvt" class="btn">注册</button>
            </div>
        </div>
     </div>
</template>
<script setup>
import { reactive, ref, defineEmits } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import ajax from '../../apis/ajax.js'
import { ElMessage, ElLoading } from 'element-plus'
/* 引入加密方法 */
import { MD5 } from 'crypto-js'

const store = useStore()
const router = useRouter()

const form = reactive({
    id:'',
    name:'',
    phone: "",
    password: ''
})

function registerEvt() {
    let test1=/^[A-Za-z0-9].{1,19}$/
    let test2=/^[1][3,4,5,7,8][0-9]{9}$/
    let test3=/^[A-Za-z0-9].{1,6}$/
    // if(!test1.test(form.id)||!test1.test(form.name)||!test2.test(form.phone)||!test3.test(form.password)){
        
       
    // }
    let next = true
    for (let n in form) {
        if (!form[n]) {
            ElMessage({
                message: `请填写用户完整信息`,
                type: 'warning',
            })
            next = false
            break
        }
       
    }
    if (!next) return
    
    const loading = ElLoading.service({
        lock: true,
        text: '注册中...',
        background: 'rgba(0, 0, 0, .2)',
    })

    ajax.put(
        '/register',
        {
            id: form.id,
            name:form.name,
            phone:form.phone,
            /* 提交给后端的是一个字符串 */
            password: form.password,
            token:'liyalan'
        }
    ).then(function(d){
        console.log(d)
         loading.close()
        if(d.data.code===200){
            ElMessage({
                message: `注册成功`,
                type: 'success',
            })
        router.push('/login')
        }else{
            ElMessage({
                message: `${d.data.message}`,
                type: 'error',
            })
        }
       
        
    })
}
</script>

<style lang="less">
    @import "../../style/common.less";

    .login-box {
        .rel();
        padding-top: 15vh;
        background: url(../../images/backimg.png) no-repeat;
        background-size: 100% 100%;
        /* less文件中可以使用嵌套的方式编写代码 */
        /* .login-box .content {} */
        .content {
             background: #fff !important;
            display: block;
            position: relative;
            width: 480px;
            margin: auto;
            // background: #f5f5e5;
            overflow: hidden;
            /* .login-box .content > .title {} */
            > .title {
                text-align: center;
                line-height: 68px;
                font-size: .9rem;
            }
            
            > .rem,
            > .ipt-box {
                display: block;
                width: 320px;
                padding: 10px;
                margin: 10px auto;
                border-bottom: solid 1px @cd;
                > input {
                    border: none;
                    width: 100%;
                    outline: none;
                    background: transparent;
                }
            }
            .btn{
                // // width: 100%;
                color: #688cee !important;
               
            }
            > .rem {
                border-bottom: none;
            }
           
            >div .register{
                position: absolute;
                right:10px;
                bottom: 10px;
                 display: block;
                
                width: 60px;
                // float: left;
                // margin: 10px auto;
                line-height: 36px;
                font-size: .8rem;
                text-align: center;
                .touch();
                .register{
                    padding-left: 20px;
                }
            }
        }
    }
</style>